<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/include.js"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
			
			.container .row div {
				/* position:relative;
	 float:left; */
			}
			
			font {
				color: #3164af;
				font-size: 18px;
				font-weight: normal;
				padding: 0 10px;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>

		<div class="container">
			<div id="theCart" class="row">

				<div style="margin:0 auto; margin-top:10px;width:950px;">
					<strong style="font-size:16px;margin:5px 0;">购物车</strong>
					<table class="table table-bordered">
						<tbody>
							<tr class="warning">
								<th>图片</th>
								<th>商品</th>
								<th>价格</th>
								<th>数量</th>
								<th>小计</th>
								<th>操作</th>
							</tr>
							<tr v-for="(cartItem, i) in cart" class="active">
								<td width="60" width="40%">
									<input type="hidden" name="id" value="22">
									<img :src="path+cartItem.pimage" width="70" height="60">
								</td>
								<td width="30%">
									<a target="_blank">{{cartItem.pname}}</a>
								</td>
								<td width="20%">
									￥{{cartItem.shopPrice}}
								</td>
								<td width="10%">
									<input type="text" v-bind:id="'count'+cartItem.pid" :pid="cartItem.pid" :price="cartItem.shopPrice" name="quantity" @blur="updateCount(event)" v-model="cartItem.count" maxlength="4" size="10">
								</td>
								<td width="15%">
									<span class="subtotal" :id="'subTotal'+cartItem.pid">￥{{cartItem.shopPrice*cartItem.count}}</span>
								</td>
								<td>
									<a href="javascript:void(0)" @click="deleteCartItem(cartItem.pid)" class="delete">删除</a>
								</td>
							</tr>

						</tbody>
					</table>
				</div>
			</div>

			<div style="margin-right:130px;">
				<div style="text-align:right;">
					<em style="color:#ff6600;">
				登录后确认是否享有优惠&nbsp;&nbsp;
			</em> 赠送积分: <em style="color:#ff6600;" id="total2">596</em>&nbsp; 商品金额: <strong style="color:#ff6600;" id="total">￥$total元</strong>
				</div>
				<div id="clearCart" style="text-align:right;margin-top:10px;margin-bottom:10px;">
					<a href="javascript:void(0)" @click="clearCart" id="clear" class="clear">清空购物车</a>
					<a href="order_info.htm">
						<input type="submit" width="100" value="提交订单" onclick="locationToOrder" name="submit" border="0" style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
						height:35px;width:100px;color:white;">
					</a>
				</div>
			</div>

		</div>

		<div style="margin-top:50px;">
			<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
		</div>

		<div style="text-align: center;margin-top: 5px;">
			<ul class="list-inline">
				<li>
					<a>关于我们</a>
				</li>
				<li>
					<a>联系我们</a>
				</li>
				<li>
					<a>招贤纳士</a>
				</li>
				<li>
					<a>法律声明</a>
				</li>
				<li>
					<a>友情链接</a>
				</li>
				<li>
					<a target="_blank">支付方式</a>
				</li>
				<li>
					<a target="_blank">配送方式</a>
				</li>
				<li>
					<a>服务声明</a>
				</li>
				<li>
					<a>广告声明</a>
				</li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2005-2016 天虎商城 版权所有
		</div>

	</body>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/header.js"></script>
	<script>

		var $total = 0;
		var theCart = new Vue({
			el: "#theCart",
			data: {
				cart: {},
				total: 0,
			},
			methods: {
				updateCount: function(event) {
					event = event ? event : window.event;
					var obj = event.srcElement ? event.srcElement : event.target;
					//这时obj就是触发事件的对象，可以使用它的各个属性 
					//还可以将obj转换成jquery对象，方便选用其他元素 
					var $obj = $(obj);
					console.log($obj);
					var pid = $obj.attr("pid");
					var data2 = {
						'count': $obj.val(),
						'pid': pid,
					}
					axios({
						url: "/ShopManagement/cart/updateCount",
						method: "get",
						params: data2,
					}).then(function(response) {
						if(response.data.state) {
							$("#subTotal" + pid).html("￥" + response.data.subTotal);
							$("#total").html("￥" + response.data.subTotal);
						}

					}).catch(function(reason) {
						console.log("请求失败");
					});

				},
				deleteCartItem: function(val) {
					axios({
						url: "/ShopManagement/cart/deleteCartItem",
						method: "get",
						params: {
							'pid': val
						},
					}).then(function(response) {
						if(response.data)
							window.location.href = "cart.htm"

					}).catch(function(reason) {
						console.log("请求失败");
					});

				},

			},
			mounted: function() {

				axios({
					url: "/ShopManagement/cart/getCart",
					method: "get",
					params: null,
				}).then(function(response) {

					theCart.cart = response.data;
					for(cartItem in theCart.cart) {
						var obj = theCart.cart[cartItem];
						theCart.total += obj.shopPrice * obj.count;

					}
					$("#total").html("￥" + theCart.total);
					$("#total2").html(Math.ceil(theCart.total/10));
				}).catch(function(reason) {
					console.log("请求失败");
				});

			}
		});
		var clearCart = new Vue({
			el: "#clearCart",
			methods: {
				clearCart: function() {
					axios({
						url: "/ShopManagement/cart/clearCart",
						method: "get",
						params: null,
					}).then(function(response) {
						if(response.data)
							window.location.href = "cart.htm"

					}).catch(function(reason) {
						console.log("请求失败");
					});

				}
			},
		})
	</script>

</html>